<script setup>
import { onMounted } from 'vue'
import { fabric } from 'fabric'
onMounted(() => {
  // 使用id为canvas是的画板生成一个fabricCanvas
  const canvas = new fabric.Canvas('canvas', { width: 1200, height: 800 });
  const rect = new fabric.Rect({
    top: 50, //距离画布上边的距离
    left: 100, //距离画布左侧的距离，单位是像素
    width: 100, //矩形的宽度
    height: 70, //矩形的高度
    fill: 'red', //填充的颜色
    stroke: 'orange', // 边框原色
    strokeWidth: 5, // 边框大小
    rx: 8, //圆角半径
    ry: 4 //圆角半径
  });
  canvas.add(rect);

  const circle = new fabric.Circle({
    top: 150, //距离画布上边的距离
    left: 100, //距离画布左侧的距离，单位是像素
    radius: 50, //圆形半径
    fill: 'red', //填充的颜色
    stroke: 'orange', // 边框颜色
    strokeWidth: 5 // 边框大小
  });
  canvas.add(circle);

  const triangle = new fabric.Triangle({
    top: 50, //距离画布上边的距离
    left: 300, //距离画布左侧的距离，单位是像素
    width: 100, //矩形的宽度
    height: 70, //矩形的高度
    fill: 'red', //填充的颜色
    stroke: 'orange', // 边框原色
    strokeWidth: 5 // 边框大小
  });
  canvas.add(triangle);

  const path = new fabric.Path('M 0 0 L 200 100 L 170 150 z'); // 不规则图形的路径
  path.set({
    top: 300, //距离画布上边的距离
    left: 150, //距离画布左侧的距离，单位是像素
    fill: 'red', //填充的颜色
    stroke: 'orange', // 边框颜色
    strokeWidth: 5 // 边框大小
  });
  canvas.add(path);
});

</script>

<template>
  <canvas id="canvas"></canvas>
</template>

<style scoped>
#canvas {
  margin: 10px;
  border: 1px solid #d3d3d3;
}
</style>